<template>
    <div class="join_draw">
    
        <p @click="alert_show=true">参加失败</p>


        <div class="goods_box">
            <img class="goods_photo" src="https://i1.mifile.cn/a1/pms_1527684990.93616987!220x220.jpg" alt="">
            <div class="goods_detail">
                <p>小米8 SE 4GB+64GB</p>
                <p>只要500金币就有机会得到小米8 SE 4GB+64GB <br>满1000人就开奖！</p>
                <p>500金币可兑换一次抽奖机会</p>
            </div>
        </div>



        <div class="choose">
             <group>
                <cell title="选择兑换次数">
                    <inline-x-number style="display:block;" v-model="number" :max="parseInt(cotal/neednum)" :min="0" width="50px" ></inline-x-number>
                </cell>
             </group>
        </div>

        <div class="Gold">
            <p>所需金币 <span>{{num}}</span></p>
            <p>扣除后剩余金币数 <span>{{cotal1}}</span></p>
        </div>

        <div class="bottom">
       
        <div @click="show=true">确定参与</div>
     </div>
      <div class="bottom_fill">

      </div>

     <confirm v-model="show"
  
      @on-cancel="onCancel"
      @on-confirm="onConfirm"
     
      confirm-text="去设置"
      >
        <p style="text-align:center;">为了您的账户安全，请先去设置交易密码</p>
      </confirm>

      <div v-transfer-dom>
      <alert v-model="alert_show" title="参与失败" @on-show="alert_onShow" @on-hide="alert_onHide"> 
         <p style="color:#333;font-size: 0.42666667rem;margin-bottom:0.282666672rem">您未能成功参与抽奖，原因是：</p>
        本次抽奖参与人数已达上限，请返回选
        择其他奖项进行抽奖；
      </alert>
    </div>


    </div>
</template>

<script>
import { Group, Cell, InlineXNumber ,Confirm,Alert  } from "vux";

export default {
  components: {
    InlineXNumber,
    Group,
    Cell,
    Confirm ,
    Alert
  },
  data() {
    return {
        show:false,
        alert_show:false,
        neednum:500,
        num:0,
        number: 0,
        cotal:1050,
        cotal1:1050
    };
  },
    watch:{
        number(newvalue,oldvalue){
             this.num=newvalue*this.neednum   
             this.cotal1  =  this.cotal-  this.num
        }
    },
    methods:{
        onCancel(){
         console.log('onCancel');

        },
        onConfirm(){
         console.log('onConfirm');
            
        },
        

    }
};
</script>

<style scoped lang='less'>
@import "../style/base.less";

.join_draw {
  background: #f5f5f5;
  height: 100vh;
  .goods_box {
    background: #fff;
    padding: 24 / @px;
    display: flex;
    // align-items: center;
    .goods_photo {
      width: 180 / @px;
      height: 180 / @px;
      margin-right: 26 / @px;
    }
    .goods_detail {
      p:first-child {
        font-size: 30 / @px;
        color: #1a1a1a;
      }
      p:nth-child(2) {
        width: 500 / @px;
        color: #666;
        font-size: 26 / @px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      p:nth-child(3) {
        padding-top: 15 / @px;
        color: #ff0032;
        font-size: 24 / @px;
      }
    }
  }

  .Gold {
    background: #fff;
    padding: 24 / @px;
    p {
      color: #333;
      font-size: 30 / @px;
      margin-bottom: 30 / @px;
      span {
        color: #ff0032;
        font-size: 36 / @px;
      }
    }
  }

  .bottom_fill {
    width: 100%;
    height: 88 / @px;
  }
  .bottom {
    z-index: 111;
    background: #fff;
    border-top: 1px solid #e6e6e6;
    width: 100%;
    height: 88 / @px;
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 36 / @px;
    div {
      text-align: center;
      color: #1a1a1a;
      width: 100%;
      line-height: 88 / @px;
      background: #ffdb4f;
    }
  }
}
</style>